<template>
	<view class="container">
		<!--header-->
		<com-goods-list-header
			ref="goods_list_header"
			:options="headerOptions" 
			@onOrderChange = "orderChangeHandler"
			@onListStyleChange="opt => { listOptions.isList = opt}">
		</com-goods-list-header>
		<!--header-->


		<!--list-->
		<view style="margin-top:200rpx;">
			<com-goods-list :options="listOptions" ref="goods_list"></com-goods-list>
		</view>
		<!--list-->
	
		<main-tabbar></main-tabbar>		
	</view>
</template>

<script>
	import comGoodsListHeader from "@/components/com/com-goods-list-header/com-goods-list-header";
	import comGoodsList from "@/components/com/com-goods-list/com-goods-list";
	
	export default {
		components: {
			comGoodsListHeader,
			comGoodsList
		},
		data() {
			return {
				headerOptions:{//com-goods-list-header 配置
					goodsListPage:"/pages/goods/list"
				},
				listOptions:{//com-goods-list 配置
					listDataApi:this.$api.goods.rightList,
					queryParams:{},
					isList:false
				},
			}
		},
		onLoad: function(opt){
			if(opt.cat_id){
				this.listOptions.queryParams.cat_id = opt.cat_id
			}
			this.headerOptions.searchKeyword = opt.searchKey ?? '';
			this.listOptions.queryParams.keyword = this.headerOptions.searchKeyword;
		},
		//监听当前页面滚动，并同步给子组件
		onPageScroll(e) {
			this.$refs.goods_list.PageScrollHandler(e);
		},
		/* 触底调用子组件方法加载更多 */
		onReachBottom() {
			this.$refs.goods_list.loadMore();
		},
		methods:{
			orderChangeHandler(opt){
				let param = {};
				for(let key in this.listOptions.queryParams){
					if(this.listOptions.queryParams[key]){
						param[key] = this.listOptions.queryParams[key];
					}
				}
				param['order'] = JSON.stringify(opt);
				this.listOptions.queryParams = param
			}
		}
	}
</script>

<style lang="less">
	
</style>
